<template>
  <el-table
    v-loading="loading"
    :data="datatable"
    style="width: 100%"
    :height="clientHeight"
    :header-cell-style="{ background: '#F2F2F2', color: '#7C7C7C' }"
    border
    :default-sort="{prop: sortporps, order: 'descending'}"
  >
    <el-table-column
      v-for="(item, index) in tableheader"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :sortable="item.issort"
      align="center"
    >
      <template slot-scope="scope">
        <div v-if="item.label == '签到状态' || item.label == '签退状态' " :class="scope.row[item.prop]== '缺卡' ? 'text-wrapper text-color' : 'text-wrapper' ">
        {{ scope.row[item.prop] }}
        </div>
        <div v-else class="text-wrapper">
        {{ scope.row[item.prop] }}
        </div>
      </template>
    </el-table-column>
    <el-table-column v-if="operation" class="operation" label="操作" align="center">
      <template slot-scope="scope">
        <el-button v-if="operation.isedit" @click="EditTableData(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button v-if="operation.isdelete&&scope.row.name!='默认考勤组'" style="background-color: #F56C6C;
        border-color: #F56C6C;" type="danger" @click="DeleteTableData(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "DataTable",
  props: {
    loading: Boolean,
    datatable: Array,
    tableheader: Array,
    operation: Object,
    clientHeight: String
  },
  computed:{
    sortporps() {
      let sortporps = [];
      this.tableheader.forEach( element => {
        if(element.issort) {
          sortporps.push(element.prop);
        }
      })
      return sortporps;
    }
  },
  methods: {
    // 编辑表格数据（传出）
    EditTableData(index, row) {
      this.$emit('editData', row);
    },
    // 删除表格数据（传出）
    DeleteTableData(index, row) {
      this.$emit('deleteData', row);

    }
  },
};
</script>

<style lang="scss">
.text-wrapper {
  white-space: pre-wrap;
}
.text-color{
  color:#FF0000;
}
.el-table{
  .el-button{
    &:first-child{
      color: #fff;
      border-color: #4180b1;
      background-color: #4180b1;
    }
  }
}
</style>